<template>
  <div>
    <div>城市的单选和多选组件</div>
    <p class="tip">也可以选择全国哦</p>
    <div>
      <el-button type="primary" @click="checkedCity">选择城市</el-button>
    </div>
  </div>
  <MultiplePickCity ref="multiplePickCity" :is-single="true" @getCityData="getCityData"></MultiplePickCity>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import MultiplePickCity from '@/components/multiplePickCity/index.vue'

// 报表组件
const multiplePickCity = ref()

const initData = reactive({
  cityInfo: {}
})
// 选择城市
const checkedCity = () => {
  console.log(multiplePickCity.value, 'multiplePickCity.value')
  multiplePickCity.value && multiplePickCity.value.init({ defaultCheckedKeys: [] })
}

// 获取城市信息
const getCityData = (data) => {
  console.log(data, 'datadata')
}
</script>

<style lang="scss" scoped>
.tip {
  font-size: 12px;
  color: rgb(80, 79, 77);
  margin: 20px 0;
}
</style>
